import React, { Component } from 'react17'
import { connect } from 'react-redux'
import { addPerson } from '../../redux-store/actions/person';
import { nanoid } from 'nanoid';

class Person extends Component {
    addPerson = () => {
        console.log("Person this.props:::", this.props)
        const name = this.nameNode.value;
        const age = this.ageNode.value;
        const personObj = { id: nanoid(), name, age };
        console.log("personObj:::", personObj)
        this.props.addPerson(personObj);
        this.nameNode.value = '';
        this.ageNode.value = '';
    }
    render() {
        return (
            <div>
                <h2>我是Person组件，上方组件求和为：{this.props.count}</h2>
                <input ref={c => this.nameNode = c} type="text" placeholder="请输入名字" />
                <input ref={c => this.ageNode = c} type="text" placeholder="请输入年龄" />
                {/* 不是this.props.addPerson!!! */}
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.persons.map((p) => {
                            console.log("p:::", p);
                            return <li key={p.id}>{p.name}---{p.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({
        persons: state.persons, // personList
        count: state.count
    }),
    { addPerson }
)(Person);
